<template>
  <div>
    <div>
      <el-form size="medium">
        <el-form :inline="true">
          <el-form-item label="姓名">
            <el-input v-model="customerName"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="销售员">
            <el-input v-model="salesman"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="customerPhone"
                      placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="getCustomerList">查询</el-button>
            <el-button type="primary"
                       @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-form>
      <el-table ref="multipleTable"
                border
                stripe
                :data="customerList"
                tooltip-effect="dark"
                style="width: 100%">
        <el-table-column prop="customerName"
                         label="姓名"></el-table-column>
        <el-table-column prop="customerSexy"
                         label="性别"></el-table-column>
        <el-table-column prop="customerAddress"
                         label="地址"></el-table-column>
        <el-table-column prop="customerPhone"
                         label="手机号"></el-table-column>
        <el-table-column prop="customerFrom"
                         label="来源"></el-table-column>
        <el-table-column prop="salesman"
                         label="销售员"></el-table-column>
        <el-table-column prop="signedTime"
                         label="签约时间"></el-table-column>
        <el-table-column prop="arrivalTime"
                         label="预计到港时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row.id)"
                       type="text"
                       size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
      </div>
    </div>
    <view-page :current-page="currentPage"
               :total="total"
               @change="pageChange"></view-page>
  </div>
</template>

<script>
import '@/style/common.scss'
import viewPage from '@/components/pagination'
import { api } from '@/api'

export default {
  data() {
    return {
      customerName: null,
      salesman: null,
      customerPhone: null,
      currentPage: 0,
      total: null,
      customerList: [{ customerId: 1 }]
    }
  },
  activated() {
    this.getCustomerList()
  },
  components: { viewPage },
  methods: {
    reset() {
      this.customerName = null
      this.salesman = null
      this.customerPhone = null
      this.getCustomerList()
    },
    getCustomerList() {
      const params = {
        customerName: this.customerName,
        customerPhone: this.customerPhone,
        salesman: this.salesman,
        pageNum: this.currentPage,
        pageSize: 10
      }
      this.$http.post(api.CUSTOMER_LIST, params).then(
        res => {
          if (res.result.hasContent) {
            this.customerList = res.result.content
            this.currentPage = res.result.pageNumber
            this.total = res.result.totalElements
          } else {
            this.customerList = []
            this.currentPage = 0
            this.total = null
          }
        }
      )
    },
    detail(id) {
      this.$router.push({
        name: 'customerDetail',
        params: { customerId: id }
      })
    },
    pageChange(page) {
      this.currentPage = page - 1
      this.getCustomerList()
    }
  }
}
</script>
